<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header_abs('表格加明细')" />
    <style>
        .layui-table-click {
            background-color:lightgrey;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content">
    <div class="row" style="margin-left:2px">
        <div class="col-md-5" style="min-height:470px;">
            <div class="select-table table-striped">
            <table id="mainTable" class="table table-bordered">
                <thead><th style="display: none">隐藏列</th><th>病区</th><th>值</th></thead>
                <tbody>
                <tr th:each="item,index:${tbody}" th:name="${item.ID_DIM_DEPTNUR}">
                    <td th:text="${item.ID_DIM_DEPTNUR}"></td>
                    <td th:text="${item.NA_DIM_DEPTNUR}"></td>
                    <td th:text="${item.VALUE}"></td>
                </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div class="col-md-7" style="min-height:470px;">
            <div class="select-table table-striped">
                <table id="dtTable" class="table table-bordered">
                    <thead></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    <th:block th:include="include :: footer_abs" />
    <script type="text/javascript">
        var prefix = ctx + "etl/query";
        var dwQueryParam = "[[${dwParam}]]";
        dwQueryParam = eval('(' + dwQueryParam.replaceAll("&quot;","\"") + ')');
        var g_whereSql = dwQueryParam.whereSql;
        var token = "[[${token}]]";
        $(function() {
            $('#mainTable').bootstrapTable({
                url: "",
                method:"post",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                pageSize:15,
                search: false,
                sidePagination: 'client',
                showRefresh : false,
                onClickRow: onClickRow
            });
            $('#dtTable').bootstrapTable({
                url: "",
                method:"post",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                pageSize:15,
                search: false,
                sidePagination: 'client',
                showRefresh : false,
            });
        });
        function onClickRow(row, $element) {
            $element.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            var whereSql = g_whereSql==""?"":(g_whereSql+" and ");
            dwQueryParam.whereSql = whereSql+"ID_DIM_DEPTNUR='"+row[0]+"'";

            $.ajax({
                type: "POST",
                beforeSend: function(request) {
                    request.setRequestHeader("token", token);
                },
                url:"/hdw/qry/dw/query",
                data: JSON.stringify(dwQueryParam),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function(res) {
                    showTableData(res.data,"dtTable");
                }
            });
        }
    </script>
</body>
</html>